<template>
  <div class="Echarts">
    <el-row style="margin: 10px 0px 10px 20px">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <el-date-picker
            v-model="daterangeOrderDate"
            size="small"
            style="width: 300px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selDateCount"
          ></el-date-picker>
        </el-col>
    </el-row>   
    <div id="main1" style="width: 100%;height:500px;margin-left:15px;"></div>
    <el-row>
      <el-col :span="12">
        <el-table v-loading="loading" :data="allValues">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="行业" align="center" prop="name" />
          <el-table-column label="数量" align="center" prop="value"/>
          <el-table-column label="销售金额（元）" align="center" prop="totalMoney"/>
        </el-table>
      </el-col>
      <el-col :span="12">
        <el-table v-loading="loading" :data="values">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="行业" align="center" prop="name" />
          <el-table-column label="数量" align="center" prop="value"/>
          <el-table-column label="销售金额（元）" align="center" prop="totalMoney"/>
        </el-table>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { selCustomerSourceCount } from "@/api/crm/index";

export default {
  name: 'CustomerSourceChart',
  data(){
    return {
      // 遮罩层
      loading: true,
      allValues: [],
      values: [],
      chart: null,
      params: {startDate: '', endDate: ''},
      daterangeOrderDate: []
    }
  },
  methods:{
    //时间修改后查询
    selDateCount(){
      if(null != this.daterangeOrderDate){
        this.params = {startDate: this.daterangeOrderDate[0], endDate: this.daterangeOrderDate[1]};
      }else{
        this.params = {startDate: '', endDate: ''};
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('main1'));
      this.setOptions(this.allValues, this.values)
    },
	  setOptions(allValues, values){

      this.chart.setOption({
			  title: [{
          text: '客户来源分析',
          subtext: '',
          left: 'left'
        },
        {
          subtext: '全部客户',
          left: '25%',
          top: '90%',
          textAlign: 'center'
        },
        {
          subtext: '成交客户',
          left: '75%',
          top: '90%',
          textAlign: 'center'
        }],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        label: {
          formatter: '{b} : {c}',
          minMargin: 5,
          edgeDistance: 10,
          lineHeight: 15,
          rich: {
            time: {
              fontSize: 10,
              color: '#999'
            }
          }
        },
        toolbox: {
          show: false,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [{
            name: '全部客户',
            type: 'pie',
            radius: [20, 140],
            center: ['25%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            data: allValues
          },
          {
            name: '成交客户',
            type: 'pie',
            radius: [20, 140],
            center: ['75%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: values
          }
        ]
		  })
		},
    selSaleQuotaCount(params){
      params.isNotAll = '1';
      params.type = 'customer_source';
      selCustomerSourceCount(params).then(response => {
        this.values = response.data;
      });

      params.isNotAll = '';
      selCustomerSourceCount(params).then(response => {
        this.allValues = response.data;
        this.setOptions(this.allValues, this.values);
        this.loading = false;
      });
      
      
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    })
  },
  watch: {
      //值改变时触发
      params: {
      　　handler(newValue, oldValue) {
            this.selSaleQuotaCount(this.params);
      　　},
          deep: true,
      　　immediate: true
      }
  }
}
</script>

<style>

</style>